<template>
  <div class="page">
    <div class="handlePart">
      <el-form :inline="true" :model="form">
        <el-form-item label="取水户名称">
          <el-tooltip
            class="tips"
            content="请输入取水户名称"
            placement="top-start"
          >
            <i class="el-icon-info"></i>
          </el-tooltip>
          <el-input
            size="small"
            v-model="form.ecNumName"
            style="width: 130px"
            placeholder="请输入关键字"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="取水口名称">
          <el-tooltip
            class="tips"
            content="请输入取水口名称"
            placement="top-start"
          >
            <i class="el-icon-info"></i>
          </el-tooltip>
          <el-input
            size="small"
            v-model="form.ecNumSubName"
            style="width: 130px"
            placeholder="请输入取水口名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="行政分区：">
          <el-cascader
            ref="areaCodeRef"
            v-model="areaChecked"
            size="small"
            style="width: 130px"
            :props="{
              expandTrigger: 'hover',
              label: 'name',
              value: 'areaCode',
              checkStrictly: true,
            }"
            :options="areaTree"
            placeholder="请选择"
            clearable
            :show-all-levels="false"
            filterable
            @change="handleAreaCodeChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="流域分区：">
          <el-cascader
            ref="basinCodeRef"
            v-model="basinChecked"
            size="small"
            style="width: 130px"
            :props="{
              expandTrigger: 'hover',
              label: 'name',
              value: 'basinCode',
              checkStrictly: true,
            }"
            :options="basinOptions"
            placeholder="请选择"
            clearable
            :show-all-levels="false"
            filterable
            @change="handleBasinCodeChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="监测年份:">
          <el-date-picker
            style="width: 130px"
            size="small"
            v-model="form.date"
            format="yyyy"
            value-format="yyyy"
            type="year"
            placeholder="选择时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            size="small"
            type="warning"
            icon="el-icon-clear"
            @click="clear"
            >清空</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="success"
            icon="el-icon-download"
            @click="exportExcel"
            >数据导出</el-button
          >
        </el-form-item>
        <el-form-item >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="add"
            >新增</el-button
          >
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="dels"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="tablePart">
      <el-table
        ref="listTable"
        :data="list"
        :height="'calc(100vh - 290px)'"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="55"
        ></el-table-column>
        <el-table-column
          prop="ecNum"
          label="取水户编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ecNumName"
          label="取水户名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ecNumSub"
          label="取水口编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ecNumSubName"
          label="取水口名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="areaCode"
          label="行政单元"
          align="center"
          :formatter="areaFormatter"
        ></el-table-column>
        <el-table-column
          prop="basinCode"
          label="流域单元"
          align="center"
          :formatter="basinFormatter"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="统计水量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="purpose"
          label="统计用途"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="retainWater"
          label="蓄水水量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="diversionWater"
          label="引水水量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="carryWater"
          label="提水水量"
          align="center"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="160">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              title="编辑"
              @click="edit(scope.row)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              title="删除"
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagePart">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <EditDialog ref="editDialogRef" @listInit="listInit" />
    <!-- <DetailDialog ref="detailDialogRef" /> -->
  </div>
</template>
<script>
import EditDialog from "./editDialog.vue";
import { mapState } from "vuex";
// import DetailDialog from './detailDialog.vue';
export default {
  data() {
    return {
      form: {
        ecNumName: '',
        ecNumSubName: '',
        date: '',
        areaCode: 0,
        basinCode: 0,
        keywords: "",
        orderBy: "",
      },
      areaChecked: [],
      basinChecked: [],
      list: [],
      page: 1,
      size: 10,
      total: 0,
      selectList: [],
    };
  },
  mounted() {
    this.listInit();
    // this.$api.getDictList({page:1,size:1000})
    // this.$api.getDictDetail({dicGuid: '1391306323524675'})
  },
  computed: {
    ...mapState(["areaTree", "basinOptions"]),
  },
  methods: {
    listInit() {
      if (this.areaChecked.length > 0) {
        this.form.areaCode = parseInt(this.areaChecked.slice(-1)[0]);
      }
      if (this.basinChecked.length > 0) {
        this.form.basinCode = parseInt(this.basinChecked.slice(-1)[0]);
      }
      let params = Object.assign({}, this.form, {
        size: this.size,
        page: this.page,
        orderBy: "",
      });
      this.$api.getStatisticsList(params).then((res) => {
        if (res && res.code == 200) {
          let data = res.data || {};
          this.total = data.total || 0;
          this.list = data.list || [];
        }
      });
    },
    // 查询
    search() {
      this.page = 1;
      this.listInit();
    },
    clear() {
      this.areaChecked = [];
      this.basinChecked = [];
      Object.assign(this.form, this.$options.data().form);
      this.search();
    },
    async exportExcel() {
      if (this.areaChecked.length > 0) {
        this.form.areaCode = parseInt(this.areaChecked.slice(-1)[0])
      }
      if (this.basinChecked.length > 0) {
        this.form.basinCode = parseInt(this.basinChecked.slice(-1)[0])
      }
      let params = Object.assign({}, this.form, {
        size: 99999,
        page: 1,
        orderBy: ""
      })
      const allRes = await this.$api.getStatisticsList(params);
      if (allRes && allRes.code === 200) {
        const data = allRes.data.list || [];
        const arecode="areaCode"
        const basinCode="basinCode"
        data.forEach((item, index) => {
          item.areaCode = this.$util.searchInTree(this.areaTree, arecode, item.areaCode);
          item.basinCode = this.$util.searchInTree(this.basinOptions, basinCode, item.basinCode);
        });
        const tableRef = this.$refs.listTable;
        this.$exportExcel(data, tableRef, "统计水量管理");
      } else {
        this.$message.error("获取数据失败");
      }
    },
    // 新增
    add() {
      this.$refs.editDialogRef.showModal("add");
    },
    // 编辑
    edit(row) {
      this.$refs.editDialogRef.showModal("edit", row);
    },
    // 配置
    config(row) {
      // this.$refs.detailDialogRef.showModal(row);
    },
    // 删除
    del(row) {
      this.$confirm("数据删除后将无法恢复，确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.delStatistics([row.id]).then((res) => {
            if (res && res.code == 200) {
              this.$notify.success({
                title: "成功",
                message: "删除成功!",
              });
              this.listInit();
            }
          });
        })
        .catch(() => {});
    },
    // 批量删除
    dels() {
      if (this.selectList.length == 0) {
        this.$notify.warning({
          title: "警告",
          message: "请至少选择一条数据！",
        });
        return;
      }
      let ids = [];
      this.selectList.forEach((l) => {
        ids.push(l.id);
      });
      this.$confirm("数据删除后将无法恢复，确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.delStatistics(ids).then((res) => {
            if (res && res.code == 200) {
              this.$notify.success({
                title: "成功",
                message: "删除成功!",
              });
              this.listInit();
            }
          });
        })
        .catch(() => {});
    },
    // 多选
    handleSelectionChange(val) {
      this.selectList = val;
    },
    // size change
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page = 1;
      this.size = val;
      this.listInit();
    },
    // page change
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.listInit();
    },
    areaFormatter(row, column) {
      return this.$util.searchInTree(
        this.areaTree,
        column.property,
        row.areaCode
      );
    },
    basinFormatter(row, column) {
      return this.$util.searchInTree(
        this.basinOptions,
        column.property,
        row.basinCode
      );
    },

    handleAreaCodeChange (selected){
      this.$refs.areaCodeRef.dropDownVisible = false;
      if(selected.length===0){
        this.areaChecked = []
        this.form.areaCode=0
      }
    },

    handleBasinCodeChange(selected){
      this.$refs.basinCodeRef.dropDownVisible = false;
      if(selected.length===0){
        this.basinChecked = []
        this.form.basinCode=0
      }
    },
  },
  components: { EditDialog },
};
</script>

<style lang="less">
.tips {
  cursor: pointer;
  margin-left: -8px;
  margin-right: 5px;
  color: #2196f3;
}
</style>
